.search-box-wrapper{
  .search-input{
    margin-top: 0.5rem;
    svg{
      margin-top: 1rem;
    }
    input{
      height: 2.5rem;
      line-height: 2.5rem;
      border-radius: 5rem;
    }
  }
  .search-host-wrapper{
    padding:12px;

    width: 100vw;
    .font-header{
      font-size: 13px;
      color: #989797;
      margin-bottom: 10px;
    }
    .font-content{
      // display: grid;
      // grid-template-columns: 30vw 30vw 30vw;
      // grid-gap: 10px ;
      display: flex;
      flex-wrap: wrap;
      padding:5px 10px;
      div{
        font-size: 14px;
        border-radius: 5px;
        background-color: #eee;
        display: inline-block; /* 设置为行内块级元素，宽度自适应内容 */
        margin: 5px; /* 设置盒子之间的间距，可以根据需要调整 */
        background-color: #f0f0f0; /* 设置背景颜色，可以根据需要调整 */
        padding: 10px; /* 设置内边距，可以根据需要调整 */
      }
    }
  }
  .search-class-wrapper {
    width: 100vw; /* 设置容器宽度，可以根据实际情况调整 */
    margin: 0 auto; /* 居中显示，可选 */
    padding:12px;
    .font-header{
      font-size: 13px;
      color: #989797;
      margin-bottom: 10px;
    }
    .class-photo-wrapper {
      display: flex;
      flex-wrap: wrap;
      div {
        flex: 0 0 46%; /* 设置盒子宽度为每行的一半，留有一些间距 */
        margin: 2%; /* 设置盒子之间的间距，可以根据需要调整 */
        box-sizing: border-box; /* 防止边框和内边距增加盒子宽度 */
        position: relative;
        img {
          width: 100%; /* 图片宽度100% */
          height: 130px; /* 图片高度自适应 */
          border-radius: 10px;
        }
        span {
          position: absolute;
          bottom: 15px; /* 距离底部5px，可以根据需要调整 */
          left: 50%; /* 居中 */
          transform: translateX(-50%); /* 居中 */
          padding: 5px; /* 设置内边距，可以根据需要调整 */
          font-size: 14px; /* 设置文字大小，可以根据需要调整 */
          color: #fff;
        }
      }
    }
  }
}